/**
 * 传入公文详情的事项列表
 *
 */
import React, { useEffect, useState } from 'react';
import classnames from 'classnames';
import styles from './index.module.less';
import NoData from '@/components/no-data';
// import { UNIT_MAP } from '@/pages/official-doc/constants';
import ContractSelectModal from '@/components/ContractSelectModal';
import { EditMatterUserList } from '@/services/official-doc';
import { Toast } from 'antd-mobile-v2';
import { useSelector } from 'react-redux';
import { getMatterStandardUnit } from '@/services/laber-declare';
import { FormatDictData } from '@/utils/formatter';
export interface DetailMatterCardProps {
  list: any[];
  editMember?: boolean;
  onSubmit?: () => void;
}

export const DetailMatterCard: React.FC<DetailMatterCardProps> = (props) => {
  const [list, setList] = useState<any[]>([]);
  const [selecterVisible, setSelecterVisible] = useState<boolean>(false);
  const [selectedMatter, setSelectedMatter] = useState<any>(false);
  const { orgTree } = useSelector((state: any) => ({
    orgTree: state.common.orgTree
  }));
  //  请求页面中标准字典的列表

  const [matterStandardUnitMap, setMatterMap] = useState<object>({});
  const getMatterList = async () => {
    const matterData = await getMatterStandardUnit();
    const { map } = FormatDictData(matterData.data, 'uint', 'meaning');
    setMatterMap(map);
  };
  useEffect(() => {
    getMatterList();
  }, []);

  useEffect(() => {
    setList(props.list);
  }, [props.list]);

  const formatCcUserList = (list: any[] = []) => {
    return list.map((item: any) => ({
      text: item.name,
      type: item.userOrgType,
      value: item.id
    }));
  };

  const handleSelecterClose = () => {
    toggleSelecter();
  };

  const setSelectedMatterInfo = (item: any) => {
    setSelectedMatter(item);
    setSelecterVisible(!selecterVisible);
  };

  const toggleSelecter = () => {
    setSelecterVisible(!selecterVisible);
  };

  const handleSubmit = async (_isHandle, selectArray) => {
    const data = {
      id: selectedMatter.id,
      lookUpUserList: selectArray.map((item: any) => ({
        id: item.key,
        name: item.title,
        userOrgType: item.type
      }))
    };
    // console.log('onLookUpUserListSubmit', data);
    const res = await EditMatterUserList(data);
    if (res.status === 200) {
      Toast.info('修改成功');
      props.onSubmit && props.onSubmit();
      toggleSelecter();
    } else {
      Toast.info('修改失败');
    }
  };
  return (
    <div className={styles.contentCardList}>
      <p
        className={classnames(
          styles.listTitle,
          !list.length ? styles.hide : ''
        )}
      >
        <span>已同意事项({list?.length})</span>
      </p>
      {list.map((item: any, index: number) => (
        <React.Fragment key={item.id}>
          <div className={styles.contentCard}>
            <h2 className={styles.cardTitle}>
              <span>{item.matterName}</span>
              {/* <span>¥{item.matterTotal || 0}</span> */}
              <span>
                {item.matterTotal === -1 ||
                (!item.matterTotal && item.matterTotal !== 0)
                  ? '不限额'
                  : `¥${item.matterTotal || 0}`}
              </span>
            </h2>
            <div className={styles.item}>
              <span className={styles.label}>经办人</span>
              <NoData className={styles.value} value={item.managerName} />
            </div>
            <div className={styles.item}>
              <span className={styles.label}>可查阅人</span>
              <NoData
                className={styles.value}
                value={
                  <div className={styles.positionRelative}>
                    {item.lookUpUserList?.length
                      ? item.lookUpUserList?.map((i: any) => i.name)?.join('，')
                      : '无'}
                    {props.editMember && (
                      <>
                        <i
                          className={classnames(
                            'icon iconfont',
                            styles.editIcon
                          )}
                          onClick={() => setSelectedMatterInfo(item)}
                        >
                          &#xe6ea;
                        </i>
                      </>
                    )}
                  </div>
                }
              />
            </div>
            <div className={styles.item}>
              <span className={styles.label}>备注</span>
              <NoData className={styles.value} value={item.remark} />
            </div>
            <div className={styles.item}>
              <span className={styles.label}>允许自定义标准</span>
              <span className={styles.value}>
                {item.isCustomStandard == 1 ? '允许' : '禁止'}
              </span>
            </div>
            {item.standardAddList?.map((standardItem: any) => (
              <div
                className={classnames(styles.standard, 'ratio-border')}
                key={standardItem.id}
              >
                <div
                  className={classnames(
                    styles.standardItem,
                    standardItem.remark ? 'ratio-border-bottom' : ''
                  )}
                >
                  <span className={styles.label}>
                    {standardItem.standardName}
                  </span>
                  <span className={styles.value}>
                    {standardItem.priceType === 0
                      ? standardItem.minPrice || standardItem.maxPrice
                      : `${standardItem.minPrice}-${standardItem.maxPrice}`}
                    {matterStandardUnitMap[standardItem.unit]?.label}
                  </span>
                </div>
                <div
                  className={classnames(
                    styles.standardItem,
                    !standardItem.remark ? styles.hide : ''
                  )}
                >
                  <span className={styles.label}>备注</span>
                  <span className={styles.value}>{standardItem.remark}</span>
                </div>
              </div>
            ))}
          </div>
          {index < list.length - 1 && list.length > 1 && (
            <div className={styles.contentCardSplitChunk}></div>
          )}
        </React.Fragment>
      ))}
      <ContractSelectModal
        modalStatus={selecterVisible}
        closeModal={handleSelecterClose}
        submit={handleSubmit}
        resetData={formatCcUserList(selectedMatter.lookUpUserList)}
        type='all'
        mode='multiple'
        orgData={orgTree}
        saveOnSubmit
      />
    </div>
  );
};
